import { HashRouter, Switch, Route } from "react-router-dom";
import React, { Suspense, lazy } from "react";

// 使用Suspense和lazy能快速实现路由的代码分割，并且可以展示loading效果
// 如果自己写，就会很麻烦，需要写很多判断代码去异步加载组件

let config = [
  {
    name: "/", // 名字
    path: "/", // URL路径
    exact: true, // 是否匹配下级路径
    component: lazy(() => import("./src/components/renderInput")), // 懒加载
  },
  {
    name: "renderList",
    path: "/renderList",
    exact: true,
    component: lazy(() => import("./src/components/renderList")),
  },
];
class Routers extends React.Component {
  render() {
    return (
      <HashRouter>
        <Suspense fallback={<span>loading...</span>}>
          <Switch>
            {/* 导入相关路由配置 */}
            {config.map((r, key) => (
              <Route
                exact={r.exact}
                key={key}
                path={r.path}
                component={r.component}
              />
            ))}
          </Switch>
        </Suspense>
      </HashRouter>
    );
  }
}
export default Routers;
